<template>
  <div>
    <!-- {{msg}}
    <HmButton/> -->
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :title="item.title"
      :price="item.price"
      :proId="item.id"
      :obj="obj"
      @sayPriceFn="sayPrice"
    ></MyProduct>
  </div>
</template>

<script>
import MyProduct from './components/MyProduct.vue'
// import HmButton from './components/HmButton.vue'
export default {
  data() {
    return {
      msg: '爸爸说开业大酬宾,全场8折',
      list: [
        { id: 1, title: '口水鸡', price: 100 },
        { id: 2, title: '口水鸭', price: 200 },
        { id: 3, title: '口水鹅', price: 300 },
      ],
      obj: {
        name:"小花",
        age: 18
      }
    }
  },
  components: {
    // HmButton
    MyProduct,
  },
  methods: {
    // 通过父组件监听事件的函数能通过形参拿到传递过来的数据
    sayPrice(id) {
      console.log(id);
      // find 筛选出符合条件的某一项
      // console.log(this.list.find(item => item.id === id));
      const curItem = this.list.find(item => item.id === id)
      curItem.price-=10
    }
  }
}
</script>

<style></style>
